<template>
  <div class="cube2d-container" :class="{ 'connected': isConnected, 'active': isActive }">
    <div class="cube2d" :class="`size-${size}`">
      <!-- 前面 -->
      <div class="face front">
        <div class="block" v-for="i in 9" :key="`front-${i}`" :style="{ backgroundColor: getFaceColor('F', i-1) }"></div>
      </div>
      <!-- 上面 -->
      <div class="face top">
        <div class="block" v-for="i in 9" :key="`top-${i}`" :style="{ backgroundColor: getFaceColor('U', i-1) }"></div>
      </div>
      <!-- 右面 -->
      <div class="face right">
        <div class="block" v-for="i in 9" :key="`right-${i}`" :style="{ backgroundColor: getFaceColor('R', i-1) }"></div>
      </div>
      <!-- 后面 -->
      <div class="face back">
        <div class="block" v-for="i in 9" :key="`back-${i}`" :style="{ backgroundColor: getFaceColor('B', i-1) }"></div>
      </div>
      <!-- 下面 -->
      <div class="face bottom">
        <div class="block" v-for="i in 9" :key="`bottom-${i}`" :style="{ backgroundColor: getFaceColor('D', i-1) }"></div>
      </div>
      <!-- 左面 -->
      <div class="face left">
        <div class="block" v-for="i in 9" :key="`left-${i}`" :style="{ backgroundColor: getFaceColor('L', i-1) }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义props
const props = defineProps({
  cubeFace: {
    type: String,
    default: 'UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB'
  },
  isConnected: {
    type: Boolean,
    default: false
  },
  isActive: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'normal', // small, normal, large
    validator: (value) => ['small', 'normal', 'large'].includes(value)
  }
})

// 颜色映射
const colorMap = {
  'U': '#fff', // 白色
  'D': '#ECF035', // 黄色
  'F': '#02B613', // 绿色
  'B': '#0061F2', // 蓝色
  'L': '#FF6B00', // 橙色
  'R': '#D82020'  // 红色
}

// 获取面的颜色
const getFaceColor = (face, index) => {
  const faceIndex = {
    'U': 0,
    'R': 9,
    'F': 18,
    'D': 27,
    'L': 36,
    'B': 45
  }
  
  const charIndex = faceIndex[face] + index
  const faceChar = props.cubeFace[charIndex] || 'U'
  return colorMap[faceChar] || '#ccc'
}
</script>

<style lang="scss" scoped>
.cube2d-container {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  
  &.connected {
    transform: scale(1.1);
  }
  
  &.active {
    animation: pulse 2s infinite;
  }
  
  .cube2d {
    position: relative;
    transform-style: preserve-3d;
    perspective: 500px;
    transform: rotateX(-25deg) rotateY(-35deg);
    
    &.size-small {
      width: 80rpx;
      height: 80rpx;
    }
    
    &.size-normal {
      width: 120rpx;
      height: 120rpx;
    }
    
    &.size-large {
      width: 160rpx;
      height: 160rpx;
    }
    
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 1rpx;
      
      .block {
        width: 100%;
        height: 100%;
        border-radius: 1rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.1);
      }
    }
    
    .front {
      transform: rotateX(0deg) rotateY(0deg) translateZ(50%);
    }
    
    .back {
      transform: rotateX(0deg) rotateY(180deg) translateZ(50%);
    }
    
    .top {
      transform: rotateX(90deg) rotateY(0deg) translateZ(50%);
    }
    
    .bottom {
      transform: rotateX(-90deg) rotateY(0deg) translateZ(50%);
    }
    
    .left {
      transform: rotateX(0deg) rotateY(-90deg) translateZ(50%);
    }
    
    .right {
      transform: rotateX(0deg) rotateY(90deg) translateZ(50%);
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style> 